<template>
  <div
    :class="{
      'je-admin-sider-menu-list': true,
      'is--hover': siderMenu.isHover.value,
      'is--collapsed': siderMenu.collapsed.value,
    }"
  >
    <!-- 查询 -->
    <MenuSearch :menu-type="type" />
    <div ref="sortEl" class="menu-list-body">
      <!-- 菜单项 -->
      <div
        v-for="menu in menus"
        :key="menu.id"
        :class="{
          'menu-list-item': true,
          'menu-list-item-selected': menuStore.activeSiderMenu === menu.id,
        }"
        @click="clickMenu(menu)"
      >
        <!-- 图标 -->
        <i :class="['menu-list-item-icon', menu.icon]" />
        <!-- 标题 -->
        <span class="menu-list-item-content">{{ menu.text }}</span>
        <!-- 排序 -->
        <i v-if="sort" class="menu-list-item-move jeicon jeicon-move"></i>
        <!-- 删除 -->
        <i class="menu-list-item-remove fal fa-times" @click.stop="clickRemoveClick(menu)"></i>
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue';
  import MenuSearch from './menu-search.vue';
  import { useSiderMenuList } from '../hooks/use-sider-menu-list';
  export default defineComponent({
    name: 'AdminSiderMenuList',
    components: { MenuSearch },
    props: { type: String, menus: Array, sort: Boolean },
    emits: ['sort', 'remove'],
    setup(props, context) {
      const { siderMenu, menuStore, sortEl, clickMenu, clickRemoveClick } = useSiderMenuList({
        props,
        context,
      });
      return { siderMenu, menuStore, sortEl, clickMenu, clickRemoveClick };
    },
  });
</script>
<style lang="less">
  .je-admin-sider-menu-list {
    padding-top: 44px;
    position: relative;
    .menu-list-body {
      height: 100%;
      overflow: auto;

      .menu-list-item {
        padding: 0 16px 0 24px;
        height: 40px;
        line-height: 40px;
        margin: 4px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
        cursor: pointer;
        &-icon {
          display: inline-block;
          margin-right: 10px;
          width: 14px;
          height: 14px;
          text-align: center;
        }

        &-sortable-ghost {
          * {
            visibility: hidden;
          }
        }

        &-move,
        &-remove {
          position: absolute;
          top: 50%;
          margin-top: -7px;
          line-height: 1;
          left: 6px;
          cursor: move;
          visibility: hidden;
        }
        &-remove {
          cursor: pointer;
          right: 10px;
          left: auto;
        }
        &:hover {
          .menu-list-item-move,
          .menu-list-item-remove {
            visibility: visible;
            &:hover {
              font-weight: bold;
            }
          }
        }
      }
    }

    &.is--collapsed {
      .menu-list-item {
        text-overflow: clip;
      }
      .menu-list-item-content {
        transition: visibility 0.2s ease;
        visibility: hidden;
      }
      &.is--hover {
        .menu-list-item-content {
          visibility: visible;
        }
      }
    }
  }
</style>
